<template>
	<view class="footmain" :style="{ bottom: bottom + 'px' }">
		<!-- 每个菜单增加“选中态”判断，购物车增加商品数量徽章 -->
		<view class="menu" :class="{ active: currentTab === 'shopping' }" @click="handlefootmenu('shopping')">
			<uni-icons type="bars" size="30" :color="currentTab === 'shopping' ? '#55aaff' : '#191919'"></uni-icons>
			<text>分类</text>
		</view>
		<view class="menu" :class="{ active: currentTab === 'shopMain' }" @click="handlefootmenu('shopMain')">
			<uni-icons type="shop" size="30" :color="currentTab === 'shopMain' ? '#55aaff' : '#191919'"></uni-icons>
			<text>商家</text>
		</view>
		<view class="menu" :class="{ active: currentTab === 'shopcart' }" @click="navtocart">
			<view class="uniicon">
				<uni-icons type="cart" size="30" :color="currentTab === 'shopcart' ? '#55aaff' : '#191919'"></uni-icons>
				<uni-badge class="cart-badge" :text="cart.items.length"></uni-badge>
				
			</view>

			<text>购物车</text>

			<!-- 购物车徽章：数量>0时显示，否则隐藏 -->
		</view>
	</view>
</template>
<script>
export default {
	name: 'shopFootBar',
	data() {
		return {
			bottom: 0,
			currentTab: 'shopMain'
		};
	},
	computed: {
		cart() {
			return this.$store.state.cart||[];
		}
	},
	mounted() {
		// 优化：增加错误捕获，避免设备信息获取失败导致组件异常
		try {
			const res = this.$store.state.msg.systemInfo;
			this.bottom = res.safeAreaInsets.bottom;
		} catch (e) {
			console.error('获取设备信息失败：', e);
			this.bottom = 0; // 兜底值，保证组件正常显示
		}
	},
	methods: {
		handlefootmenu(tabName) {
			this.currentTab = tabName;
			this.$emit('selecMenu', tabName);
		},
		navtocart(){
			uni.navigateTo({
				url:'/pages/shopcart/shopcart'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.footmain {
	position: fixed;
	left: 0;
	right: 0;
	display: flex;
	background-color: #fff; // 增加白色背景，避免与页面内容重叠
	border-top: 1px solid #eee; // 顶部边框，区分导航栏与页面内容
	z-index: 999; // 提高层级，避免被其他元素遮挡
}
.uniicon {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 60rpx;

}
.menu {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 8rpx 15rpx; // 优化内边距，避免过高
	background-color: #ebe0ff;
	font-size: 24rpx; // 固定字体大小，保证不同屏幕一致性
	transition: color 0.2s; // 增加颜色过渡，提升交互流畅度

	// 选中态样式：突出当前导航
	&.active {
		color: #55aaff; // 主题色，可替换为项目实际颜色
		font-weight: 600;
	}
}

// 购物车徽章：固定在右上角
.cart-badge {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  z-index: 10; /* 确保徽章显示在图标上方 */
}
</style>
